<template>
  <div class="video-page">
    <div>
      <Breadcrumb
        style="margin-right: 20px;"
        @deleteOtherRoute="deleteOtherRouteMethods"
        ref="BreadcrumbRef"
      ></Breadcrumb>
      <FileContentSearchHeader
        @addNewFold="addNewFold"
        @goToGroupManager="goToGroupManager"
        @startUploadFile="startUploadFile"
        @changeSearch="changeSearchMethods"
        @mutiSendFile="mutiSendFileMethods"
        @mutiDel="mutiDelHandler"
        add-button-text="添加"
        :search-list="['mediaName']"
        :needList="['search', 'folder','group', 'addButton', 'delete']"
      ></FileContentSearchHeader>
    </div>

    <CommonTable
      class="commonTable"
      ref="applicationTableRef"
      :is-selection="true"
      :is-show-index="true"
      :is-has-opera="true"
      :t-column-data="applicationListCol"
      :remote-api="getFileList"
      :query-params="searchObj"
      :is-reserve-select="true"
      @changeRow="changeRowMethods"
    >
      <template slot="media_name" slot-scope="scope">
        <!--文件夹-->
        <div
          class="file-name-row"
          :ref="`dragBlock${scope.$index}`"
          v-if="scope.row.file_type == '1'"
          :data-id="scope.row.id"
          @click="goToNextFold(scope.row)"
          @drop="(ev) => {dropNewHandler(ev, scope.row)}"
          @dragenter.prevent
          @dragover.prevent
        >
          <img src="./images/folder.png" class="file-icon" alt="">
          <span :data-id="scope.row.id" :class="scope.row.file_type == '1'?'fold-class': ''">
            {{scope.row.noSuffixMediaName}}
          </span>
        </div>

        <div
          class="file-name-row"
          :ref="`dragBlock${scope.$index}`"
          :draggable="true"
          :data-id="scope.row.id"
          v-else
          @dragstart="dragstartMethods(scope.row)"
          @click="goToNextFold(scope.row)"
        >
          <img src="./images/exe.png" class="file-icon" alt="">
          <span :data-id="scope.row.id">
            {{scope.row.noSuffixMediaName}}
          </span>
        </div>
      </template>
      <template slot="media_type" slot-scope="scope">
        {{scope.row.file_type == '1'? '文件夹': scope.row.media_type}}
      </template>
      <template v-if="scope.row.status == 1" slot="operate" slot-scope="scope" class="operate-btn">
        <!-- <el-button type="text" @click="sendFile(scope.row)">分发</el-button> -->
        <el-button type="text" @click="editFile(scope.row)">编辑</el-button>
        <el-button type="text" class="del-button" @click="showDelWarn(scope.row)">删除</el-button>
        <el-button v-if="$route.query.parentId && scope.row.file_type != 1" type="text" @click="moveToPrevParent(scope.row)">移动至根目录</el-button>

      </template>
    </CommonTable>


    <el-dialog
      title="应用程序"
      :visible.sync="isShowUploadDialog"
      width="40%"
      :before-close="handleClose"
    >
      <div>
        <el-form label-position="left" ref="form" :model="submitFileForm" label-width="140px">
          <el-form-item label="名称">
            <el-input v-model="submitFileForm.mediaName"></el-input>
          </el-form-item>
          <el-form-item label="路径">
            <el-input v-model="submitFileForm.location"></el-input>
          </el-form-item>
          <el-form-item label="关闭时要清理的进程">
            <el-input v-model="submitFileForm.cleanProcess"></el-input>
            <div>
              注意：添加的应用必须受控终端上提前安装。
            </div>
          </el-form-item>

          <!-- <el-form-item label="文件">
            <template v-if="!submitFileForm.image">
              <el-upload
                size="mini"
                style="width: 100%;"
                class="upload-demo"
                drag
                :on-success="uploadImageSuccess"
                :action="uploadUrl"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </template>
            <div class="upload-file-icon" v-else>
              <div @click="delFileIcon" class="el-icon-circle-close close-file-icon"></div>
              <el-image
                style="width: 100px; height: 100px"
                :src="submitFileForm.image"
                fit="cover"></el-image>
            </div>
          </el-form-item> -->
          <el-form-item label="分组">
            <el-select
              v-model="submitFileForm.groupId"
              placeholder="分组"
              clearable
            >
              <el-option
                v-for="(item, index) in groupList"
                :label="item.group_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmSubmitFile">确 定</el-button>
      </span>
    </el-dialog>

    <WarnPanelDialog
      :statusProp="statusIsDelFileProp"
      warn-content="是否删除文件"
      @confirmHandler="confirmDelMethods"
      @cancelHandler="cancelHandler"
    >
    </WarnPanelDialog>

    <WarnPanelDialog
      :statusProp="statusProp"
      :is-emit-close-methods="true"
      cancel-text="否"
      @closeHandler="closeHandlerMethods"
      @confirmHandler="confirmAllDelMethods"
      @cancelHandler="confirmDelOnlyHandler"
    ></WarnPanelDialog>

    <FileGroupManager
      :show="isShowGroup"
      @on-close="isShowGroup = false"
    ></FileGroupManager>

    <EditFileInfo
      :show="isShowEditFile"
      :mediaType="searchObj.mediaType"
      :edit-info-form="editForm"
      @on-close="isShowEditFile = false;getList()"
    ></EditFileInfo>

    <!--文件分发选择终端-->
    <TerListDialog
      ref="terListDialogRef"
      :show-ter-dialog="showTerDialog"
      @on-cancel="cancelTerDialog"
      @on-confirm="confirmSelectTer"
    ></TerListDialog>
  </div>
</template>

<script>
import Breadcrumb from './component/breadThump.vue'
import Mixins from './mixins/mixins'
import CommonTable from "@/components/Table/commonTable";
import UploadDialog from "@/components/UploadFile/index"
import {applicationListCol} from "@/views/distribute/tableCol/applicationListCol";
import * as service from './service'
import * as distributeService from "@/views/distribute/service";

export default {
  name: "video",
  mixins: [Mixins],
  components: {
    Breadcrumb,
    CommonTable,
    UploadDialog
  },
  data() {
    return {
      uploadUrl: window.ajaxUploadUrl + '/common/fileApi/file',
      showTerDialog: false,
      isShowGroup: false,
      getFileList: service.getFileList,
      isShowUploadDialog: false,
      searchObj: {
        parentId: 0,
        mediaType: 4,
        audit: 1,
        page: 1,
        pageSize: 20
      },
      applicationListCol,
      total: 0,
      submitFileForm: {
        mediaName: '',
        location: '',
        cleanProcess: '',
        mediaType: 4,
        fileType: 2,
        image: '',
        groupId:'',
        mediaSuffix: ''
      },
      mutiDelList: [],
      clickCache: {},
      groupList: [],
    }
  },
  mounted() {
    if(this.$route.query.parentId) {
      this.searchObj.parentId = this.$route.query.parentId
      this.getList()
    } else {
      this.searchObj.parentId = 0
      this.getList()
    }
  },
  watch: {
    "$route.query.parentId"(val) {
      if(val) {
        this.searchObj.parentId = val
        this.getList()
      } else {
        this.searchObj.parentId = 0
        this.getList()
      }
    }
  },
  methods: {
    delFileIcon() {
      this.submitFileForm.image = ''
    },
    uploadImageSuccess(res, file) {
      this.submitFileForm.image = res.data[0].file
    },
    cancelTerDialog() {
      this.showTerDialog = false
    },
    changeSearchMethods(msg) {
      this.searchObj = {
        ...this.searchObj,
        ...msg
      }
      this.getList()
    },
    addNewFold() {
      this.getList()
    },
    goToGroupManager() {
      this.isShowGroup = true
    },
    changeRowMethods(row) {
      this.mutiDelList = [...row]
    },
    goToNextFold(row) {
      if(row.file_type == 1) {
        this.pushRouterHistory(row, 'applicationProgram')
        this.$refs.BreadcrumbRef.refreshMenu()
      } else {
        // window.open(row.media_link)
      }
    },
    getList() {
      const params = Object.assign({}, this.searchObj)
      this.$refs.applicationTableRef.queryData(params)
    },
    confirmSubmitFile() {
      if(!this.submitFileForm.mediaName) {
        this.$message.error('请输入名称')
        return
      }
      if(!this.submitFileForm.location) {
        this.$message.error('请输入路径')
        return
      }
      if(!this.submitFileForm.cleanProcess) {
        this.$message.error('关闭时要清理的进程')
        return
      }
      // if(!this.submitFileForm.image) {
      //   this.$message.error('请上传缩略图')
      //   return
      // }
      const params = Object.assign({}, this.submitFileForm)
      service.saveFileContent(params).then(() => {
        this.$message.success('新增成功')
        this.getList()
        this.handleClose()
      })
    },
    startUploadFile() {
      const params = {
        page: 1,
        pageSize: 200000000,
        mediaType: 4
      }
      distributeService.getFileGroupList(params).then((res) => {
        this.groupList = res.data.records
      })
      this.isShowUploadDialog = true
    },
    closeUpload() {
      console.log('关闭 ---')
      this.isShowUploadDialog = false
    },
    handleClose() {
      this.isShowUploadDialog = false
      this.submitFileForm = {
        mediaName: '',
        location: '',
        cleanProcess: '',
        mediaType: 4,
        fileType: 2
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .video-page{
    padding: 15px;
    background: white;
    .fold-class{
      cursor: pointer;
      color: #409EFF;
    }
    .terminal-search-title{

    }

    .commonTable{
      margin-top: 15px;
    }

    ::v-deep .el-form--label-left .el-form-item__label{
      text-align: right;
    }
  }
</style>
